Ext.namespace('iOS.View');

Ext.define('LockScreen', {
    extend  : 'BaseView',
    
    statics : {
        ViewCls     : 'lock-screen',
        LockStuff   : 'look-stuff',
        DateBlock   : 'lock-date',
        DateYMD     : 'lock-date-ymd',
        DateHM      : 'lock-date-hm',
        SpaceCls    : 'lock-space',
        SliderBlock : 'lock-slider',
        Container   : 'lock-container-parent',
        SliderCon   : 'lock-slider-container',
        SliderHand  : 'lock-slider-handler',
        SliderImg   : 'lock-slider-image',
        SpaceType   : 'space',
        TopBarView  : 'top-bar',
        ScreenView  : 'icon-screen'
    },
    
    /*
     * 刷新时间定时器
     */
    _refleshTime  : null, 
    
    _startPos     : '21px',
    
    /*
     * 滑块对象 
     */
    _slider       : null,
                                    
    _attachEventListener: function(){
        this.callParent();
        var that  = this
        this._slider.draggable({
                'axis'        :'x',
                'containment' : 'parent'
            });
        this._slider.on('drag',      {scope: this}, this._doDrag);
        this._slider.on('dragstop',  {scope: this}, this._doStop);
        this.getElCacheByCls(this.self.SliderBlock).
            on('webkitTransitionEnd', {scope: this}, this.onTransitionEnd);
    },
    
    _initInnerDom: function(){
        var sttc     = this.self,
            htmlData = [
            '<div class="',sttc.DateBlock,'" style="',this._getFlex(95), '"></div>',
            '<div type="', sttc.SpaceType,'" style="',this._getFlex(291),'"></div>',
            '<div class="',sttc.SliderBlock,'" style="',this._getFlex(94), '">',
            '</div>', 
        ];
        this.getElCache().html(htmlData.join(''));
        this._initDateBlock();
        this._initSliderBlock();
    },
    
    /*
     * 初始化锁屏界面的日期模块
     */
    _initDateBlock: function(){
        var sttc     = this.self,
            htmlData = [];
        htmlData.push(
            '<div type="', sttc.SpaceType,'" style="',this._getFlex(5),'"></div>',
            '<div class="',sttc.DateHM   ,'" style="',this._getFlex(60),'">',
                '<span>12:00</span>',
            '</div>',
            '<div type="', sttc.SpaceType,'" style="',this._getFlex(5),'"></div>',
            '<div class="',sttc.DateYMD,  '" style="',this._getFlex(25),'">',
                '<span>11月11号 星期四</span>',
            '</div>'
        );
        this.getElCacheByCls(sttc.DateBlock).append(htmlData.join(''));
    },
    
    /*
     * 
     */
    _initSliderBlock: function(){
        var sttc     = this.self;
        var htmlData = [];
        htmlData.push(
            '<div class="',sttc.SliderImg,'"></div>',
            '<div type="', sttc.SpaceType,'" style="',this._getFlex(23),'"></div>',
            '<div class="',sttc.Container,'" style="',this._getFlex(50),'">',
                '<div type="', sttc.SpaceType,'" style="',this._getFlex(23),'"></div>',
                '<div class="',sttc.SliderCon,'" style="',this._getFlex(275),'">',
                    '<div class="',sttc.SliderHand,'"></div>',
                '</div>',    
                '<div type="',sttc.SpaceType,'" style="',this._getFlex(23),'"></div>',
            '</div>',
            '<div type="', sttc.SpaceType,'" style="',this._getFlex(21),'"></div>'
        );
        this.getElCacheByCls(sttc.SliderBlock).append(htmlData.join(''));
        this._slider  = this.getElCacheByCls(sttc.SliderHand);
    },
    
    render: function(){
        this.callParent();
    },
    
    _initView: function(){
        this.callParent();
        this._setTime();
        this._setDate();
        this._initDatePos();
        this._refleshTime = setInterval(this._setTime, 10000, this);
    },
    
    _initDatePos: function(){
        var time = this.getElCacheByCls(this.self.DateYMD).find('span');
        var date = this.getElCacheByCls(this.self.DateHM).find('span');
        time.css('margin-left', '-' + time.width() / 2 + 'px' );
        date.css('margin-left', '-' + date.width() / 2 + 'px' );
    },
    
    _setTime : function(scope){
        var that   = scope || this;
        var topBar = iOS.ViewManager.getView(that.self.TopBarView);
        var time   = topBar._getTime();
        that.getElCacheByCls(that.self.DateHM).find('span').text(time);
    },
    
    _setDate : function(){
        var time  = new Date();
        var week  = time.getDay();
        var weekD = iOS.Info.weekDay[week];
        var month = time.getMonth() + 1;
        var day   = time.getDate();
        var dis   = [];
        dis.push(
            month,'月',day,'日',' ', weekD
        );
        this.getElCacheByCls(this.self.DateYMD).find('span').text(dis.join(''));
    },
    
    _doDrag: function(event){
        var that      = event.data.scope;
        var sliderImg = that.getElCacheByCls(that.self.SliderImg);
        var slider    = that._slider;
        sliderImg.css('opacity', 1 - parseInt(slider.css('left')) / 120);
    },
    
    _doStop: function(event){
        var that      = event.data.scope;
        var sliderImg = that.getElCacheByCls(that.self.SliderImg);
        var slider    = that._slider;
        if(parseInt(slider.css('left')) < 224){
            $(slider).animate({'left': that._startPos}, 300);
            sliderImg.animate({'opacity': 1}, 300);
        } else {
            that._hideLockScreen();
        }
    },
    
    _hideLockScreen: function(){
        var sttc        = this.self;
        var dateBlock   = this.getElCacheByCls(sttc.DateBlock);
        var sliderBlock = this.getElCacheByCls(sttc.SliderBlock);
        dateBlock.css('opacity', 0).cssTranslate(0, -dateBlock.height());
        sliderBlock.css('opacity', 0).cssTranslate(0, sliderBlock.height());
    },
    
    onTransitionEnd : function(event){
        var that   = event.data.scope || this,
            $this  = $(this);
        that.hide();
        iOS.ViewManager.notify(that.self.TopBarView, 'showTopTime');
        iOS.ViewManager.notify(that.self.ScreenView, 'unlock');
        $this.off('webkitTransitionEnd');
    }
    
});

iOS.View.LockScreen = LockScreen;
